import React from "react";
import { type CveItem } from "~/server/api/routers/vulnerability";
import { cn } from "~/components/lib/utils";

interface AffectedSystemsProps {
  cve: CveItem;
  affectedHosts?: Array<{
    hostname: string;
    ip: string;
    os?: string;
    lastSeen?: string;
  }>;
}

const AffectedSystems: React.FC<AffectedSystemsProps> = ({
  cve,
  affectedHosts = [],
}) => {
  // Mock data if affectedHosts is empty
  const hosts =
    affectedHosts.length > 0
      ? affectedHosts
      : [
          {
            hostname: "web-server-01",
            ip: "192.168.1.101",
            os: "Ubuntu 22.04",
            lastSeen: "2023-08-15",
          },
          {
            hostname: "db-server-03",
            ip: "192.168.1.103",
            os: "CentOS 7",
            lastSeen: "2023-08-15",
          },
          {
            hostname: "app-server-02",
            ip: "192.168.1.102",
            os: "Windows Server 2019",
            lastSeen: "2023-08-14",
          },
        ];

  // CPE filter function (simplified example)
  const matchesCpe = (os: string | undefined, cpe: any) => {
    if (!os || !cpe) return false;
    return true; // In a real implementation, match OS against CPE criteria
  };

  return (
    <div className="py-4">
      <div className="font-orbitron mb-4 text-xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
        Affected Systems
      </div>

      {hosts.length === 0 ? (
        <div className="rounded-lg border-2 border-dashed border-gray-200 p-8 text-center dark:border-gray-700">
          <p className="text-gray-500 dark:text-gray-400">
            No affected systems found
          </p>
          <button className="mt-4 rounded-md bg-violet-600 px-4 py-2 text-sm text-white hover:bg-violet-700">
            Run New Scan
          </button>
        </div>
      ) : (
        <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-800">
              <tr>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
                >
                  Hostname
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
                >
                  IP Address
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
                >
                  Operating System
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
                >
                  Last Seen
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
                >
                  CPE Match
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
              {hosts.map((host, index) => (
                <tr
                  key={index}
                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
                >
                  <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
                    {host.hostname}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {host.ip}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {host.os || "Unknown"}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {host.lastSeen || "Unknown"}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm">
                    <span
                      className={cn(
                        "rounded-full px-2 py-1 text-xs font-medium",
                        matchesCpe(
                          host.os,
                          cve.configurations?.[0]?.nodes?.[0]?.cpeMatch?.[0]
                        )
                          ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300"
                          : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300"
                      )}
                    >
                      {matchesCpe(
                        host.os,
                        cve.configurations?.[0]?.nodes?.[0]?.cpeMatch?.[0]
                      )
                        ? "Confirmed"
                        : "Potential"}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default AffectedSystems;
